﻿/// <reference path="../jquery-1.4.4.js" />
/// <reference path="../jquery-1.4.4-vsdoc.js" />

/*!  
** Copyright (c) 2011 Ray Liang (http://www.dotnetage.com)
** Dual licensed under the MIT and GPL licenses:
** http://www.opensource.org/licenses/mit-license.php
** http://www.gnu.org/licenses/gpl.html
** 
**----------------------------------------------------------------
** title        : DJME textbox
** version   : 2.0.1
** modified: 2010-2-20
** depends:
**    jquery.ui.core.js
**    jquery.ui.widget.js
**    jquery.ui.autocomplete.js
**    jquery.ui.position.js
**    inputFilter.js
**    watermark.js
**----------------------------------------------------------------
*/

(function ($) {
    $.widget("ui.textbox", {
        options:
        {
            value: "",
            clearable: true,
            changed: null,
            waterMark: null,
            waterMarkClass: "",
            width: 200,
            height: 23,
            clearText: "Clear the input text.",
            iconClass: null,
            iconImg: null,
            textClass: null,  //"ui-input ui-state-default",
            activeClass: null, // "ui-state-active",
            cssClass: null, // "ui-textbox ui-corner-all ui-state-default",
            highlightClass: null // "ui-state-highlight"
        },
        _create: function () {
            var self = this, opts = this.options, el = this.element;
            el.wrap("<div></div>");
            var $parent = el.parent();
            $parent.addClass("d-textbox");

            this.container = $parent;
            if (opts.cssClass) $parent.addClass(opts.cssClass);
            if (opts.textClass) el.addClass(opts.textClass);
            if (opts.value) el.val(opts.value);
            if (opts.changed) el.bind("textchange", opts.changed);

            var _offsetWidth = 20;

            //if (opts.clearable)
               // _offsetWidth = 20;
            
            if ((opts.iconClass) || (opts.iconImg))
                _offsetWidth += 20;

            el.css({ "width": (opts.width - _offsetWidth) + "px" });

            $parent.css({ "width": opts.width + "px" });

            //

            if (opts.iconClass) {
                var _ico = $("<span/>").addClass(opts.iconClass)
                                                    .addClass("d-textbox-icon")
                                                    .prependTo($parent)
                                                    .click(function () { el.focus(); });
                // el.width(el.width() - _ico.width());
                //el.css({ "width": (opts.width-20) + "px" });
            } else {
                if (opts.iconImg) {
                    var _icon = $("<span/>").addClass("d-textbox-icon")
                                                          .css({ "background-image": "url(" + opts.iconImg + ")" })
                                                          .prependTo($parent)
                                                          .click(function () { el.focus(); });
                    //  el.width(el.width() - _icon.width());
                    //el.css({ "width": (opts.width - 20) + "px" });
                }
            }

            if (opts.waterMark)
                el.watermark({
                    waterMark: opts.waterMark,
                    waterMarkClass: opts.waterMarkClass
                });

            if (opts.clearable) {
                var _clr = $("<span/>").addClass("d-textbox-helper");
                if (opts.clearText) {
                    _clr.attr("title", opts.clearText);
                    if ($.fn.tooltip)
                        _clr.tooltip();
                }

                _clr .appendTo($parent);

                //el.width(el.width() - 30);.css({ "float": "right" })

                if (el.val() == "")
                    _clr.hide();

                _clr.bind("click", function () {
                    el.val("");
                    _clr.hide();
                    el.focus();
                });

                el.bind("change", function () {
                    if (el.val() != "")
                        _clr.show();
                    else
                        _clr.hide();
                    opts.value = el.val();
                    el.trigger("textchange", opts.value);
                });
            }

            el.hover(function () {
                $parent.addClass("d-textbox-hover");
                if (opts.highlightClass) $parent.addClass(opts.highlightClass);

            },
             function () {
                 $parent.removeClass("d-textbox-hover");
                 if (opts.highlightClass) $parent.removeClass(opts.highlightClass);

             });

            el.bind("focus", function () {
                $parent.addClass("d-textbox-active");
                if (opts.activeClass) $parent.addClass(opts.activeClass);
            });

            el.bind("blur", function () {
                $parent.removeClass("d-textbox-active");
                if (opts.activeClass) $parent.removeClass(opts.activeClass);
            });
        }
    });
})(jQuery);   